<template>
	<div class="booklist">
		<ul>
			<li v-for="(item,i) in FilterList" :key="item.id">
				<router-link :to="`bookdetail/${item.id}`">
					<img :src="'http://127.0.0.1/api/public/showimg/'+item.picture" />
					<h3>书名:{{item.name}}</h3>
					<h3>价格:￥{{item.price}}</h3>
					<span>月销售:{{item.hot}}</span>
				</router-link>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name: 'MobileBooks',
		props: ['proplist'],
		data() {
			return {
				list: []
			}
		},
		watch: {
			//如果数据是请求获取，基本都是需要监听props
			proplist() {
				this.list = this.proplist;
			}
		},
		computed: {
			FilterList() {
				let filters = this.list.map((item) => {
					return {
						id: item.id,
						name: item.meno ? item.meno : item.name,
						picture: item.picture ? item.picture : item.pic,
						price: !item.price ? 0 : item.price,
						hot: item.salenum ? item.salenum : 0
					}
				});
				return filters
			}
		}
	}
</script>

<style scoped>
	.booklist{
			width: 100%;
			height: inherit;
			background-color: #f0d4a0;
		}
		.booklist header{
			line-height: 5rem;
			background-color: #f0d4a0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #A68B5B;
		}
		
		.booklist header h2{
			color: white;
			font-size: 2rem;
			margin-left: 0.5rem;
			
		}
		.booklist header a{
			display: inline-block;
			width: 8rem;
			font-size: 2rem;
			color: white;
			text-decoration: none;
		}
		.booklist ul{
			width: 90%;
			margin: 0 auto ;
			height: inherit;
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
			list-style: none;
			
		}
		.booklist ul li{
			width:48%;
			overflow: hidden;
			margin-bottom: 1rem;
			background-color: white;
			text-align: center;
			position: relative;
			
		}
		.booklist ul li img{
			width:60%;
			height: 100%;
			margin-top: 1rem;
		}
		.booklist ul li h3{
			width: 100%;
			height: 10%;
			line-height:2rem;
			font-size: 1rem;
			background-color: rgba(245,213,160,0.5);
			color: #A68B5B;
			text-align: center;
			font-weight: normal;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			
		}
		.booklist ul li span{
			font-size: 1rem;
			background-color: rgba(0,0,0,0.5);
			position: absolute;
			top: 0;
			right: 0;
			color: gold;
			padding: 0.4rem 0.3rem;
			/* 单独设置某个角为圆角 */
			border-radius: 0 0 0 0.6rem;
		}
		.booklist ul li div{
			font-size: 1rem;
			background-color: #faeacf;
			color: #faeacf;
			position: relative;
			color: #A68B5B;
			padding: 0.4rem 0.3rem;
			/* 单独设置某个角为圆角 */
		}
</style>